<!--
 * AZ翻译插件 - 设置组件
 * @author huangguohui2002
 * @description 插件配置界面，管理API设置和翻译参数
-->

<template>
  <div class="settings-container">
    <h3>设置</h3>
    <p class="description">配置 AI 助手的基本参数，所有设置将自动同步到云端</p>

    <van-cell-group inset>
      <div class="field-wrapper">
        <van-field
          v-model="apiAddress"
          label="API 地址"
          placeholder="请输入 API 地址"
          label-width="80px"
        />
        <p class="field-desc">大语言模型的 API 接口地址</p>
      </div>

      <div class="field-wrapper">
        <van-field
          v-model="apiKey"
          label="API Key"
          type="password"
          placeholder="请输入 API Key"
          label-width="80px"
        />
        <p class="field-desc">用于访问 API 的密钥</p>
      </div>

      <div class="field-wrapper">
        <van-field
          v-model="model"
          label="模型"
          placeholder="请输入模型名称"
          label-width="80px"
        />
        <div class="model-buttons">
          <van-button
            v-for="option in modelOptions"
            :key="option.value"
            :type="model === option.value ? 'primary' : 'default'"
            @click="model = option.value"
            size="small"
          >
            {{ option.text }}
          </van-button>
        </div>
        <p class="field-desc">输入模型名称或从建议列表中选择</p>
      </div>

      <div class="field-wrapper">
        <van-field name="picker" label="目标语言" label-width="80px">
          <template #input>
            <van-radio-group v-model="targetLanguage" direction="horizontal">
              <van-radio
                v-for="lang in languageOptions"
                :key="lang.value"
                :name="lang.value"
              >
                {{ lang.text }}
              </van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <p class="field-desc">选择翻译的目标语言</p>
      </div>
    </van-cell-group>

    <div class="action-buttons">
      <van-button type="default" @click="testApi" block>测试 API</van-button>
      <van-button type="primary" @click="saveSettings" block
        >保存设置</van-button
      >
    </div>
  </div>
</template>

<script lang="ts" setup>
/**
 * 设置组件逻辑
 * @author huangguohui2002
 * @description 处理插件配置的数据管理和持久化
 */

import { ref, onMounted } from "vue";
import { showSuccessToast, showFailToast } from 'vant';

// 定义响应式数据，初始值为空
const apiAddress = ref("");
const apiKey = ref("");
const model = ref("");
const targetLanguage = ref("");

// 模型选项列表
const modelOptions = [
  { text: "gpt-4", value: "gpt-4" },
  { text: "gpt-3.5-turbo", value: "gpt-3.5-turbo" },
  { text: "claude-3.5-sonnet", value: "claude-3.5-sonnet" },
];

// 目标语言选项列表
const languageOptions = [
  { text: "中文", value: "zh-CN" },
  { text: "英文", value: "en-US" },
  { text: "日文", value: "ja-JP" },
];

// 组件挂载时从缓存加载数据
onMounted(async () => {
  try {
    const storedData:any = await storage.getItem('local:api');
    if (storedData) {
      // 如果缓存中有数据，则更新响应式变量
      apiAddress.value = storedData.apiAddress || "";
      apiKey.value = storedData.apiKey || "";
      model.value = storedData.model || "";
      targetLanguage.value = storedData.targetLanguage || "";
    }
  } catch (error) {
    console.error("加载缓存数据失败:", error);
  }
});

// 测试 API 方法
const testApi = () => {
  // 判断参数是否为空
  if (apiAddress.value && apiKey.value && model.value && targetLanguage.value) {
    showSuccessToast('测试成功');
  } else {
    showFailToast('请输入完整信息');
  }
};

// 保存设置方法
const saveSettings = async () => {
  console.log("保存设置，参数：", {
    apiAddress: apiAddress.value,
    apiKey: apiKey.value,
    model: model.value,
    targetLanguage: targetLanguage.value,
  });
  
  // 判断参数是否为空
  if (apiAddress.value && apiKey.value && model.value && targetLanguage.value) {
    try {
      // 存储配置到缓存
      await storage.setItem('local:api', {
        apiAddress: apiAddress.value,
        apiKey: apiKey.value,
        model: model.value,
        targetLanguage: targetLanguage.value
      });
      showSuccessToast('保存成功');
    } catch (error) {
      console.error("保存设置失败:", error);
      showFailToast('保存失败，请重试');
    }
  } else {
    showFailToast('请输入完整信息');
  }
};
</script>

<style scoped>
.settings-container {
  padding: 1px 24px 24px 24px;
  background-color: #f7f8fa;
  min-height: 100vh;
}

h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #323233;
  text-align: center;
}

p.description {
  font-size: 14px;
  color: #969799;
  margin-bottom: 24px;
  line-height: 1.5;
  text-align: center;
}

.field-wrapper {
  margin-bottom: 20px;
}

.field-desc {
  font-size: 12px;
  color: #969799;
  margin-top: 8px;
  padding: 0 16px; /* 与 van-field 内边距对齐 */
}

.model-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding: 0 16px; /* 与 van-field 内边距对齐 */
  flex-wrap: wrap;
}

.model-buttons .van-button {
  height: 32px;
  font-size: 13px;
  border-radius: 16px;
}

.action-buttons {
  display: flex;
  gap: 16px;
  padding: 0 16px;
  margin-top: 32px;
}

:deep(.van-cell-group) {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
}

:deep(.van-cell) {
  padding: 12px 16px;
}

:deep(.van-field__label) {
  font-size: 14px;
  color: #646566;
  display: flex;
  align-items: center;
  height: 32px; /* 与输入框高度一致 */
  line-height: 1;
}

:deep(.van-field__control) {
  font-size: 14px;
  height: 32px;
  line-height: 32px;
}

:deep(.van-field__body) {
  align-items: center;
}

:deep(.van-radio-group) {
  gap: 16px;
  font-size: 14px;
}

:deep(.van-radio__icon) {
  font-size: 16px;
}
</style>
